<template>
  <div class="c-w100">
    <div
      class="c-w100 c-h c-pf c-p-t0 c-p-l0 c-p-b0 c-p-r0 c-translucent-balck50 c-pz101 c-maxw640 c-m-0auto"
      v-if="canvasImg"
    >
      <div class="c-textAlign-l c-pf c-p-t0 c-p-l0 c-p-r0 c-m-0auto width-544rem">
        <div
          class="share-close c-pa iconfont icon-buoumaotubiao20 c-fc-white c-fs40"
          style="top:-1.75rem;right:0;"
          @click="handleClickClosePost()"
        ></div>
        <div
          id="spreadImg"
          class="c-contexty-scroll c-flex-column"
        >
          <img
            :src="canvasImg"
            alt=""
          >
        </div>
        <div
          class="c-pa c-p-tl50 c-fs24 c-fc-white c-w100 c-textAlign-c"
          style="transform:translateX(-50%);bottom: -1.5rem;"
        >
          <i class="iconfont icon-zhiwen c-fs24 c-fc-white c-mr12"></i>
          长按上面图片保存海报
        </div>
      </div>
    </div>
    <!-- html,视频，音频，文字，图文 -->
    <div
      class="c-w100 c-h c-pf c-p-t0 c-p-b0 c-p-l999999"
      v-if="circlePosterMsg != null"
    >
      <div
        id="canvasSharePoster"
        class="c-flex-row c-justify-center shareposter c-br10"
        style="padding:24px;"
      >
        <div class="c-bg-white c-w100 c-br10">
          <!-- top -->
          <div
            class="c-flex-row"
            style="padding:30px 24px 30px 24px;"
          >
            <div
              class="c-brp50"
              style="width:64px;height:64px;"
            >
              <img
                class="c-brp50"
                style="width:64px;height:64px;"
                :src="$addXossFilter(circlePosterMsg.headimgurl, require('@/assets/defult_head.png'))"
                alt=""
              >
            </div>
            <div
              class="c-flex-column c-justify-sb c-flex-grow1 c-w0"
              style="padding-left:12px;"
            >
              <p
                class="c-fc-xblack"
                style="font-size:24px;"
              >{{circlePosterMsg.nickname}}</p>
              <div
                class="c-fc-gray c-flex-row c-justify-sb c-aligni-center"
                style="font-size:20px;"
              >{{circlePosterMsg.createdAt}}</div>
            </div>
          </div>
          <!-- line -->
          <div class="market-line">
            <span class="market-left"></span>
            <span class="market-right"></span>
          </div>
          <!-- bottom -->
          <div
            class="c-w100"
            style="padding:30px 24px 30px 24px;"
          >
            <div class="c-bd-b1">
              <div
                class="c-fc-xblack c-wb-ba"
                style="font-size:24px;margin-bottom:20px;"
                ref="feedsContent"
                v-if="circlePosterMsg.feedsContent != null"
                v-html="openlink(circlePosterMsg.feedsContent)"
              ></div>
              <!-- 图片 -->
              <template v-if="circlePosterMsg.resourceList.imgArr != null">
                <div
                  class="c-w100"
                  v-for="(item, index) in circlePosterMsg.resourceList.imgArr"
                  :key="index"
                  :class="inex == circlePosterMsg.resourceList.imgArr.length - 1 ?'':'c-mb20'"
                >
                  <img
                    v-if="circlePosterMsg.resourceList.imgArr != null"
                    class="c-w100 c-br8"
                    :src="$addXossFilter(item || require('@/assets/defult270.png'))"
                    @load="onLoadImg(item)"
                    @error="onLoadImg(item)"
                    alt=""
                  >
                </div>
              </template>
              <!-- 音频 -->
              <template v-if="circlePosterMsg.resourceList.audioArr != null">
                <div
                  class="c-br8 c-pv16 c-ph20 c-fc-white c-bg-xgreen c-flex-row c-justify-sb c-aligni-center"
                  style="width:300px;height:64px;padding:0 20px 0 20px;margin-bottom:20px;"
                  :style="{'margin-bottom':(circlePosterMsg.resourceList.audioArr.length == 1?'20px':'12px')}"
                >
                  <img
                    style="width:48px;height:48px;"
                    class="c-rotate180"
                    :src="require('@/assets/i/wap/course/chat_right_play.png')"
                    alt=""
                  />
                  <span
                    style="width:48px;text-align:right;font-size:22px;"
                    class="c-fc-white"
                  >{{circlePosterMsg.resourceList.audioArr[0].audioTime}}"</span>
                </div>
                <div
                  class="c-fc-gray"
                  style="margin-bottom:30px;font-size:20px;"
                  v-if="circlePosterMsg.resourceList.audioArr != null && circlePosterMsg.resourceList.audioArr.length > 1"
                >共有{{circlePosterMsg.resourceList.audioArr.length}}条语音</div>
              </template>
              <div
                class="c-w100 c-br8 c-text-hidden c-flex-row c-flex-center c-p"
                style="margin-bottom:30px;height:300px;"
                :class="circlePosterMsg.resourceList.imgArr != null ?'c-mt20':''"
                v-if="circlePosterMsg.resourceList.videoArr != null"
              >
                <i
                  class="iconfont c-pa c-fc-white"
                  style="font-size:40px;"
                  v-if="circlePosterMsg.resourceList.videoArr != null && circlePosterMsg.resourceList.videoArr.videoLogo != ''"
                >&#xe869;</i>
                <img
                  class="c-w100 c-br8 c-object-fit-cover"
                  :src="$addXossFilter(circlePosterMsg.resourceList.videoArr != null && circlePosterMsg.resourceList.videoArr.videoLogo,'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png')"
                  alt=""
                >
              </div>
              <!-- 直播 -->
              <div
                class="c-mt24"
                v-if="circlePosterMsg.relationLive.length > 0"
              >
                <div
                  class="c-flex-row c-aligni-center c-br12 c-bg-sgray c-ph24 c-pv24"
                  v-for="(liveItem, liveIndex) in circlePosterMsg.relationLive"
                  :key="liveIndex"
                >
                  <div class="c-br12" style="width: 180px;height:120px;">
                    <img
                      class="c-w100 c-h c-object-fit-cover c-br12"
                      :src="$addXossFilter(circlePosterMsg.liveType == 3 ? liveItem.cover : liveItem.avatar, require('@/assets/defult270.png'))"
                      alt=""
                    >
                  </div>
                  <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb 0" style="height: 120px;margin-left:20px;">
                    <div class="c-text-ellipsis2 c-fc-xblack" style="font-size:24px;">{{liveItem.name}}</div>
                    <div class="c-flex-row c-justify-sb c-aligni-center">
                      <div class="theme-fc" style="font-size:24px;">
                        <span
                          v-if="liveItem.payType == 2"
                          class="c-fs18"
                        >{{'￥' | iosPriceFilter}}</span>
                        {{liveItem.payType | priceValueFilter(liveItem.price, 51)}}
                      </div>
                      <div
                        class="c-flex-row c-flex-center c-br12 c-fc-white"
                        style="height:26px;padding:0 8px;font-size:18px;"
                        :class="statusClassName[liveItem.status]"
                      >
                        <div
                          class="c-flex-row c-aligni-end c-mr6"
                          v-if="liveItem.status==1"
                        >
                          <span class="pillar"></span>
                          <span class="pillar"></span>
                          <span class="pillar"></span>
                        </div>
                        {{statusMap[liveItem.status]}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 主题 -->
              <div
                class="c-mt24"
                style="margin-bottom:20px;"
                v-if="circlePosterMsg.isShow"
              >
                <div class="c-inline-center theme-bg-10 c-hh60 c-pv4 c-ph20 c-fs30 theme-fc c-flex-row c-aligni-center c-br20">
                  <div class="c-flex-row c-flex-center c-h">
                    <i class="iconfont c-fs28 c-pr8">&#xe6fd;</i>
                    {{circlePosterMsg.themeName}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 二维码 -->
          <div
            class="c-flex-row c-w100"
            style="padding:0 24px 0 24px;margin-bottom:30px;"
          >
            <div
              class="c-flex-grow1 c-w0 c-flex-column c-justify-center c-aligni-end c-fc-gray"
              style="font-size:20px;margin-right:12px;"
            >
              <p>长按扫码</p>
              <p>查看完整内容</p>
            </div>
            <div class="qrcodeImg80">
              <img
                class="qrcodeImg80"
                :src="$addXossFilter(qrcodeImg)"
                alt=""
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CirclePoster",
  props: {
    qrcodeImg: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      circlePosterMsg: null,
      canvasImg: '',
      statusMap: {
        0: "预告",
        1: "正在直播",
        2: "回放",
        3: "直播已结束",
        4: "已过期"
      },
      statusClassName: {
        0: 'status-0',
        1: 'status-1',
        2: 'status-2',
        3: 'status-3',
        4: 'status-4',
      },
      imgCount: 0,
    }
  },
  mounted() {
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas.js").then(res => {
      this.html2canvas = res.default;
    })
  },
  computed: {
    openlink() {
      return function (text) {
        /* eslint-disable */
        let title = text.replace(/[<>&"]/g, function(c) {
          return {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c];
        })
        let titleReg = new RegExp('\n', "g");
        title = title.replace(titleReg, "<br>");
        if (!title) {
          return '';
        }
        if (title.length) {
          let reg = /(https?|ftp|file)(:\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g;
          title = title.replace(reg, function (txt) {
            return `<span class="theme-fc link">${txt}</span>`
          })
        }
        return title;
      }
    },
  },
  created() {
  },
  methods: {
    setClinetHeight() {
      this.$nextTick(() => {
        let windowHeight = window.innerHeight;
        let fontSize = Number(document.documentElement.style.fontSize.replace(/px$/, ''));
        let topH = (200 / 40) * fontSize
        let spreadImgHeight = windowHeight - topH;
        document.querySelector("#spreadImg").style.maxHeight = spreadImgHeight + 'px';
      })
    },
    onLoadImg(item) {
      this.imgCount ++;
      if (this.imgCount == this.circlePosterMsg.resourceList.imgArr.length) {
        this.$nextTick(() => {
          this.initPoster();
        })
      }
    },
    async handleClickPoster(info) {
      this.imgCount = 0;
      this.circlePosterMsg = info;
      if (this.circlePosterMsg.resourceList.imgArr == null) {
        this.$nextTick(() => {
          this.initPoster();
        })
      }
    },
    initPoster() {
      let shareposter = document.getElementById("canvasSharePoster")
      this.$loading.show({
        text: "转发海报生成中"
      });
      this.html2canvas(shareposter, {
        useCORS: true,
        backgroundColor: 'transparent',
        letterRendering: true,
        scale: 1,
        height: shareposter.offsetHeight, // 解决当前页面生成图片出现白边问题
        width: shareposter.offsetWidth,
        scrollY: 0,
        scrollX: 0,
      }).then(canvas => {// eslint-disable-line
        let ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
      });
    },
    handleClickClosePost() {
      this.canvasImg = '';
      this.circlePosterMsg = null;
    },
    canvasToImage(ctx) {
      try {
        let dataURL = ctx.canvas.toDataURL("image/png?x-oss-process=style/common");
        this.canvasImg = dataURL;
        this.setClinetHeight();
        this.$loading.hide();
      } catch (err) {
        this.$loading.hide();
        console.log(err.message);
        console.log(err.stack);
      }
    },
  }
}
</script>

<style lang="less" scoped>
.c-maxh1040 {
  max-height: 26rem;
}
.qrcodeImg80 {
  width: 120px;
  height: 120px;
}
.shareposter {
  position: fixed;
  width: 544px;
  height: auto;
  background: #f6ead7;
}
.shareposter1 {
  position: fixed;
  width: 544px;
  max-height: 446px;
  background: #f6ead7;
}
.shareposter2 {
  position: fixed;
  width: 544px;
  max-height: 546px;
  background: #f6ead7;
}
.market-line {
  position: relative;
  width: 100%;
  height: 3px;
  background: url("../../../assets/i/wap/circle/dashed.png") no-repeat center
    center;
  background-size: contain;
  .market-left {
    position: absolute;
    top: -12.5px;
    left: -12.5px;
    width: 25px;
    height: 25px;
    background: #f6ead7;
    border-radius: 0 50% 50% 0;
  }
  .market-right {
    position: absolute;
    top: -12.5px;
    right: -12.5px;
    width: 25px;
    height: 25px;
    background: #f6ead7;
    border-radius: 50% 0 0 50%;
  }
}
.width-544rem {
  width: 13.6rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.height-766rem {
  height: 19.15rem;
}
.pillar{
  width: 1px;
  margin: 0 1px;
  height: .1rem;
  background: #fff;
  border-radius: 5px;
  animation: pillarDance 2s infinite  ease;
}
.pillar:first-child{
  animation-delay:0.5s;
}
.pillar:nth-child(2){
  animation-delay:1s;
}
.pillar:nth-child(3){
  animation-delay:1.5s;
}
.status-0 {
  background: linear-gradient(90deg, #f74163, rgba(247, 65, 99, 0.7));
}
.status-1 {
  background: linear-gradient(90deg, #30b656, rgba(48, 182, 86, 0.7));
}
.status-2 {
  background: linear-gradient(90deg,#ff8920, #ffc26b);
}
.status-3 {
  background: linear-gradient(90deg, #406596, rgba(64, 101, 150, 0.7) 100%);
}
.status-4 {
  background: #cccccc;
}
@-webkit-keyframes pillarDance{
    0%{height:.1rem;}
    50%{height:.4rem;}
    100%{height:.1rem;}
}
</style>